<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Contrast tests</title>

<link rel="stylesheet" href="https://htest.dev/htest.css" crossorigin />
<script src="https://htest.dev/htest.js" crossorigin></script>
<link rel="stylesheet" href="style.css" />

<script src="../color.js" type="module"></script>

<script>
function contrastTest(...args) {
	let td2 = document.currentScript.parentNode.previousElementSibling;
	let td1 = td2.previousElementSibling;

	$out(() => {
		let color1 = new Color(td2.textContent);
		let color2 = new Color(td1.textContent);

		return color1.contrast(color2, ...args);
	});
}
</script>

</head>
<body data-epsilon=".0001">

<h1>Contrast Tests</h1>

<section>
	<h1>WCAG 2.1 contrast, sRGB</h1>
	<table class="reftest" data-test="numbers" data-columns="4" data-colors="1,2">

		<tr>
			<td>white</td>
			<td>black</td>
			<td>
				<script>contrastTest("WCAG21");</script>
			</td>
			<td>21</td>
		</tr>
		<tr>
			<td>white</td>
			<td>white</td>
			<td>
				<script>contrastTest("WCAG21");</script>
			</td>
			<td>1</td>
		</tr>
		<tr>
			<td>#ffe</td>
			<td>white</td>
			<td>
				<script>contrastTest("WCAG21");</script>
			</td>
			<td>1.010070</td>
		</tr>
		<tr>
			<td>#afbaae</td>
			<td>white</td>
			<td>
				<script>contrastTest("WCAG21");</script>
			</td>
			<td>2.008125</td>
		</tr>
		<tr>
			<td>#8b9986</td>
			<td>white</td>
			<td>
				<script>contrastTest("WCAG21");</script>
			</td>
			<td>3.000644</td>
		</tr>
		<tr>
			<td>#765</td>
			<td>white</td>
			<td>
				<script>contrastTest("WCAG21");</script>
			</td>
			<td>5.502984</td>
		</tr>
	</table>
</section>

<section>

	<h1>WCAG 2.1 contrast, Display P3</h1>
	<table class="reftest" data-test="numbers" data-columns="4" data-colors="1,2">

	<tr>
		<!-- same as 3.00 above but p3 -->
		<td>color(display-p3 0.555354 0.5982801 0.5316741)</td>
		<td>white</td>
		<td>
			<script>contrastTest("WCAG21");</script>
		</td>
		<td>3.000644</td>
	</tr>
	</table>
</section>

<section>

	<h1>WCAG 2.1 contrast, LCH</h1>
	<table class="reftest" data-test="numbers" data-columns="4" data-colors="1,2">

		<tr>
			<td>lch(50% 0 0)</td>
			<td>white</td>
			<td>
				<script>contrastTest("WCAG21");</script>
			</td>
			<td>4.4836</td>
		</tr>
	</table>
</section>

<section>

	<h1>WCAG 2.1 contrast, With NaN</h1>
	<table class="reftest" data-test="numbers" data-columns="4" data-colors="1,2">

		<tr>
			<td>lch(50% 0 NaN)</td>
			<td>white</td>
			<td>
				<script>contrastTest("WCAG21");</script>
			</td>
			<td>4.4836</td>
		</tr>
	</table>
</section>

<section>
	<h1>APCA contrast, sRGB</h1>
	<p>Test results from <a href="https://github.com/Myndex/apca-w3/blob/master/test/test.html">apca-w3 test</a>. First color is text, second is background.</p>
	<table class="reftest" data-test="numbers" data-columns="4" data-colors="1,2">
	<tr>
		<td>#888</td>
		<td>#fff</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>63.056469930209424</td>
	</tr>
	<tr>
		<td>#fff</td>
		<td>#888</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>-68.54146436644962</td>
	</tr>
	<tr>
		<td>#000</td>
		<td>#aaa</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>58.146262578561334</td>
	</tr>
	<tr>
		<td>#aaa</td>
		<td>#000</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>-56.24113336839742</td>
	</tr>
	<tr>
		<td>#123</td>
		<td>#def</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>91.66830811481631</td>
	</tr>
	<tr>
		<td>#def</td>
		<td>#123</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>-93.06770049484275</td>
	</tr>
	<tr>
		<td>#123</td>
		<td>#444</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>8.32326136957393</td>
	</tr>
	<tr>
		<!-- confirmed correct with @Myndex -->
		<td>#444</td>
		<td>#123</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>-7.526878460278154</td>
	</tr>
	</table>
</section>

<section>
	<h1>APCA contrast, sRGB gamut in other color spaces</h1>
	<p>Same colors as previous tests, all in sRGB gamut, in other color spaces. First color is text, second is background.</p>
	<table class="reftest" data-test="numbers" data-columns="4" data-colors="1,2">
	<tr>
		<td>color(display-p3 0.5333333 0.5333333 0.5333333)</td>
		<td>#fff</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>63.056469930209424</td>
	</tr>
	<tr>
		<td>#fff</td>
		<td>color(prophoto-rgb 0.4590162 0.4590162 0.4590162)</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>-68.54146436644962</td>
	</tr>
	<tr>
		<td>#000</td>
		<td>color(rec2020 0.6301706 0.6301706 0.6301706)</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>58.146262578561334</td>
	</tr>
	<tr>
		<td>color(xyz-d65 0.3820622 0.4019778 0.437777)</td>
		<td>#000</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>-56.24113336839742</td>
	</tr>
	<tr>
		<td>hsl(210 50% 13.333333%)</td>
		<td>lch(93.207946% 10.778089 252.00404)</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>91.66830811481631</td>
	</tr>
	<tr>
		<td>oklch(94.162468% 0.0293154 248.13928)</td>
		<td>oklch(24.619227% 0.0398483 249.73161)</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>-93.06770049484275</td>
	</tr>
	<tr>
		<td>color(display-p3 0.0819793 0.1316305 0.1944321)</td>
		<td>color(a98-rgb 0.2735638 0.2735638 0.2735638)</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>8.32326136957393</td>
	</tr>
	<tr>
		<!-- confirmed correct with @Myndex -->
		<td>hwb(0 26.666667% 73.333333%)</td>
		<td>hwb(210 6.6666667% 80%)</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>-7.526878460278154</td>
	</tr>
	</table>
</section>

<section>
	<h1>APCA contrast, outside sRGB gamut</h1>

	<table class="reftest" data-test="numbers" data-columns="4" data-colors="1,2">
	<tr>
		<td>color(display-p3 1 1 0)</td>
		<td>#fff</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>0</td>
	</tr>
	<tr>
		<td>color(display-p3 1 1 0)</td>
		<td>#000</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>-102.29879033895834</td>
	</tr>
	<tr>
		<td>#fff</td>
		<td>color(display-p3 1 1 0)</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>0</td>
	</tr>
	<tr>
		<td>#000</td>
		<td>color(display-p3 1 1 0)</td>
		<td>
			<script>contrastTest("APCA");</script>
		</td>
		<td>100.98312326509509</td>
	</tr>
	</table>
</section>

<section>
	<h1>Lstar contrast, sRGB</h1>
	<p>Same test color pairs as <a href="https://github.com/Myndex/apca-w3/blob/master/test/test.html">apca-w3 test</a>. </p>
	<table class="reftest" data-test="numbers" data-columns="4" data-colors="1,2">
	<tr>
		<td>#888</td>
		<td>#fff</td>
		<td>
			<script>contrastTest("Lstar");</script>
		</td>
		<td>43.29658976448289</td>
	</tr>
	<tr>
		<td>#fff</td>
		<td>#888</td>
		<td>
			<script>contrastTest("Lstar");</script>
		</td>
		<td>43.29658976448289</td>
	</tr>
	<tr>
		<td>#000</td>
		<td>#aaa</td>
		<td>
			<script>contrastTest("Lstar");</script>
		</td>
		<td>69.61016686067734</td>
	</tr>
	<tr>
		<td>#aaa</td>
		<td>#000</td>
		<td>
			<script>contrastTest("Lstar");</script>
		</td>
		<td>69.61016686067734</td>
	</tr>
	<tr>
		<td>#123</td>
		<td>#def</td>
		<td>
			<script>contrastTest("Lstar");</script>
		</td>
		<td>80.77804435335543</td>
	</tr>
	<tr>
		<td>#def</td>
		<td>#123</td>
		<td>
			<script>contrastTest("Lstar");</script>
		</td>
		<td>80.77804435335543</td>
	</tr>
	<tr>
		<td>#123</td>
		<td>#444</td>
		<td>
			<script>contrastTest("Lstar");</script>
		</td>
		<td>16.42200146571048</td>
	</tr>
	<tr>
		<!-- confirmed correct with @Myndex -->
		<td>#444</td>
		<td>#123</td>
		<td>
			<script>contrastTest("Lstar");</script>
		</td>
		<td>16.42200146571048</td>
	</tr>
	</table>
</section>

<section>
	<h1>Weber contrast, sRGB</h1>
	<p>Same test color pairs as <a href="https://github.com/Myndex/apca-w3/blob/master/test/test.html">apca-w3 test</a>. </p>
	<table class="reftest" data-test="numbers" data-columns="4" data-colors="1,2">
	<tr>
		<td>#888</td>
		<td>#fff</td>
		<td>
			<script>contrastTest("Weber");</script>
		</td>
		<td>3.0617165365103394</td>
	</tr>
	<tr>
		<td>#fff</td>
		<td>#888</td>
		<td>
			<script>contrastTest("Weber");</script>
		</td>
		<td>3.0617165365103394</td>
	</tr>
	<tr>
		<td>#000</td>
		<td>#aaa</td>
		<td>
			<script>contrastTest("Weber");</script>
		</td>
		<td>50000</td>
	</tr>
	<tr>
		<td>#aaa</td>
		<td>#000</td>
		<td>
			<script>contrastTest("Weber");</script>
		</td>
		<td>50000</td>
	</tr>
	<tr>
		<td>#123</td>
		<td>#def</td>
		<td>
			<script>contrastTest("Weber");</script>
		</td>
		<td>54.745740598838104</td>
	</tr>
	<tr>
		<td>#def</td>
		<td>#123</td>
		<td>
			<script>contrastTest("Weber");</script>
		</td>
		<td>54.745740598838104</td>
	</tr>
	<tr>
		<td>#123</td>
		<td>#444</td>
		<td>
			<script>contrastTest("Weber");</script>
		</td>
		<td>2.8480815999063975</td>
	</tr>
	<tr>
		<!-- confirmed correct with @Myndex -->
		<td>#444</td>
		<td>#123</td>
		<td>
			<script>contrastTest("Weber");</script>
		</td>
		<td>2.8480815999063975</td>
	</tr>
	</table>
</section>

<section>
	<h1>Michelson contrast, sRGB</h1>
	<p>Same test color pairs as <a href="https://github.com/Myndex/apca-w3/blob/master/test/test.html">apca-w3 test</a>. </p>
	<table class="reftest" data-test="numbers" data-columns="4" data-colors="1,2">
	<tr>
		<td>#888</td>
		<td>#fff</td>
		<td>
			<script>contrastTest("Michelson");</script>
		</td>
		<td>0.6048771230917556</td>
	</tr>
	<tr>
		<td>#fff</td>
		<td>#888</td>
		<td>
			<script>contrastTest("Michelson");</script>
		</td>
		<td>0.6048771230917556</td>
	</tr>
	<tr>
		<td>#000</td>
		<td>#aaa</td>
		<td>
			<script>contrastTest("Michelson");</script>
		</td>
		<td>1</td>
	</tr>
	<tr>
		<td>#aaa</td>
		<td>#000</td>
		<td>
			<script>contrastTest("Michelson");</script>
		</td>
		<td>1</td>
	</tr>
	<tr>
		<td>#123</td>
		<td>#def</td>
		<td>
			<script>contrastTest("Michelson");</script>
		</td>
		<td>0.9647550639238472</td>
	</tr>
	<tr>
		<td>#def</td>
		<td>#123</td>
		<td>
			<script>contrastTest("Michelson");</script>
		</td>
		<td>0.9647550639238472</td>
	</tr>
	<tr>
		<td>#123</td>
		<td>#444</td>
		<td>
			<script>contrastTest("Michelson");</script>
		</td>
		<td>0.5874656895134326</td>
	</tr>
	<tr>
		<!-- confirmed correct with @Myndex -->
		<td>#444</td>
		<td>#123</td>
		<td>
			<script>contrastTest("Michelson");</script>
		</td>
		<td>0.5874656895134326</td>
	</tr>
	</table>
</section>

<script src="./reftests.js" type="module"></script>

</body>
</html>
